<!--
 * @Author: zqx me_zqx@163.com
 * @Date: 2025-03-03 17:25:38
 * @LastEditors: zqx me_zqx@163.com
 * @LastEditTime: 2025-03-06 10:54:50
 * @FilePath: /XMate-h5/src/components/choosePeople/components/AvatarDisplay.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <template v-if="item.type === 'department'">
    <!-- 部门头像 -->
<!--    <div-->
<!--      class="w-10 h-10 rounded-full bg-white flex items-center justify-center mr-3 text-white"-->
<!--    >-->
<!--      {{ getInitial("部门") }}-->
<!--    </div>-->
    <div
      class="w-10 h-10 rounded-full flex items-center justify-center mr-3 text-white"
      :style="{ backgroundColor: getAvatarColor(item.name) }"
    >
      {{ getInitial("部门") }}
    </div>
  </template>
  <template v-else>
    <!-- 人员头像 -->
    <template v-if="item.avatar">
      <img :src="item.avatar" class="w-10 h-10 rounded-full mr-3 object-cover" />
    </template>
    <template v-else>
      <div
        class="w-10 h-10 rounded-full flex items-center justify-center mr-3 text-white"
        :style="{ backgroundColor: getAvatarColor(item.name) }"
      >
        {{ getInitial(item.name) }}
      </div>
    </template>
  </template>
</template>

<script setup>
defineProps({
  item: {
    type: Object,
    required: true,
  },
  getAvatarColor: {
    type: Function,
    required: true,
  },
  getInitial: {
    type: Function,
    required: true,
  },
});
</script>
